<template>
  <button @click="isShow = !isShow">切换</button>
  <transition name="sxs" appear>
    <div v-show="isShow">dsadsadsadsadsadsa</div>
  </transition>
  <br />
  <br />
  <br />
  <br />
  <button @click="isShow2 = !isShow2">切换2</button>
  <transition name="sxs" mode="out-in">
    <div v-if="isShow2">1111111111111</div>
    <div v-else>2222222222222</div>
  </transition>
</template>

<script setup>
import { reactive, ref } from "vue";
var isShow = ref(true);
var isShow2 = ref(true);
</script>
<script>
export default {
  data() {
    return {
      // isShow: false,
      // isShow2: false
    };
  },
  methods: {},
};
</script>

<style scoped>
.sxs-enter-active {
  animation: aaa 0.5s;
}
.sxs-leave-active {
  animation: aaa 0.5s reverse;
}

@keyframes aaa {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>